<<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
	<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>中国古典十大名曲为：{{array\join}}</p>
			<p>中国古典十大名曲为：{{array\join(' 、')}}</p>
			<p>中国古典十大名曲为：{{array\join('《','》')}}</p>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				array: ['高山流水','梅花三弄','夕阳箫鼓','汉宫秋月','阳春白雪','渔樵问答','胡笳十八拍',
				'广陵散','平沙落雁','十面埋伏']
			},
			filters: {
				join: function(val,...marks){
					var length = marks.length;
					if(length == 2){
						return val.map((v)=>{
							return marks[0] + v +marks[1]
						}).join('')
					}else if(length == 1){
						return val.join(marks[0])
					}else{
						return val.join(',')
					}
				}
			}
		});
	</script>
</html>